<template>
  <mu-container>
    <info-chart :data="mergedInfo"></info-chart>
  </mu-container>
</template>

<script>
import { fetchInfo } from '@/api/info'
import { mergeInfo } from '@/util/info'
import { mapGetters } from 'vuex'
import InfoChart from './InfoChart'

export default {
  name: 'Info',
  components: {
    InfoChart
  },
  data() {
    return {
      info: [],
      mergedInfo: []
    }
  },
  computed: {
    ...mapGetters({
      types: 'types/types'
    })
  },
  created() {
    this.fetch()
  },
  methods: {
    async fetch() {
      try {
        this.info = await fetchInfo()
        this.mergedInfo = mergeInfo(this.types, this.info)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>

</style>
